<template>
  <div class="backTop" v-show="showBackTop" @click="scrollTop">
      <van-icon name="arrow-up" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBackTop: false
    }
  },
  mounted() {
    window.onscroll = () => {
      if (document.documentElement.scrollTop + document.body.scrollTop > 200) {
        this.showBackTop = true
      } else {
        this.showBackTop = false
      }
    }
  },
  methods: {
    scrollTop() {
      document.body.scrollIntoView({ block: 'start', behavior: 'smooth' })
    }
  }
}
</script>

<style lang="scss">
    .backTop{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgb(153, 153, 153);
        position: fixed;
        right: 10px;
        bottom: 130px;
        background-color: #fff;
        display: flex;
        .van-icon{
            font-size: 26px;
            margin: auto;
            color: rgb(153, 153, 153);
        }
    }
</style>